import React, { useState, useEffect } from "react";
import { Card, Button, Tabs, Row, Col } from "antd";
import { withTheme } from "@rjsf/core";
import validator from "@rjsf/validator-ajv8";
import { schema, uiSchema, formData } from "./utils";
import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4";

// 使用 rjsf 的 bootstrap-4 主题表单
const ThemedForm = withTheme(Bootstrap4Theme);

const ThemeSwitcherForm = () => {
  const [theFormData, setFormData] = useState({});

  // 按需注入 bootstrap@4.6.2 样式，避免与本地 bootstrap@5 冲突
  useEffect(() => {
    const id = "rjsf-bootstrap4-css";
    let link = document.getElementById(id) as HTMLLinkElement | null;
    if (!link) {
      link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      link.href =
        "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css";
      document.head.appendChild(link);
    }
  }, []);

  const handleSubmit = (data: any) => {
    console.log("提交的数据:", data);
  };

  const commonProps = {
    schema,
    uiSchema,
    formData,
    onChange: (e: any) => setFormData(e.formData),
    onSubmit: handleSubmit,
    validator,
  };

  return <ThemedForm {...commonProps} />;
};

export default ThemeSwitcherForm;
